import React, { useCallback } from "react";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import ImageAtom from "../../UI_KIT/Atoms/Image.Atom";
import CloseIcon from "../../shared/icons/close.svg?react";
import ImageEnum from "../../UI_KIT/Atoms/Image.Atom/enum";
import ModalWindowEnum from "./enum";
import AdminAddModal from "../../UI_KIT/Organisms/AdminAddModal.Organisms";
import { TFunction } from "i18next";
import AdminEditModalOrganisms from "../../UI_KIT/Organisms/AdminEditModal.Organisms";

interface ModalWindowProps {
  close?: (val: boolean) => void;
  type?: ModalWindowEnum;
  t?: TFunction;
  product?: any;
}

const ModalWindow: React.FC<ModalWindowProps> = (props) => {
  const { close, type, t, product } = props;

  const handleClickClose = useCallback(() => {
    close?.(false);
  }, [close]);

  return (
    <div className="fixed inset-[0] z-[999] flex justify-center items-center">
      <div
        className="absolute inset-[0] z-[-1] bg-bgModal"
        onClick={handleClickClose}
      ></div>
      <div className="mx-5 max-h-[calc(100vh-48px)] relative w-[40%] bg-bgGen mx-5 p-6 rounded-[15px]">
        <div className="flex justify-between items-center">
          {type === ModalWindowEnum.enum_addModal && (
            <TextAtom type={TextAtomEnum.enum_h2}>
              {t?.("AdminPage.productPage.modalWindow.addProducts.title")}
            </TextAtom>
          )}
          {type === ModalWindowEnum.enum_editModal && (
            <TextAtom type={TextAtomEnum.enum_h2}>
              {t?.("AdminPage.productPage.modalWindow.editProducts.title")}
            </TextAtom>
          )}
          <ImageAtom
            type={ImageEnum.enum_defaultSvg}
            icon={<CloseIcon />}
            onClick={handleClickClose}
            className="fill-tiffany w-6 h-6 cursor-pointer hover:fill-peach"
          />
        </div>
        <div className="flex flex-col mt-5 gap-4">
          {type === ModalWindowEnum.enum_addModal && (
            <AdminAddModal onClickClose={handleClickClose} t={t} />
          )}
          {type === ModalWindowEnum.enum_editModal && (
            <AdminEditModalOrganisms
              onClickClose={handleClickClose}
              product={product}
              t={t}
            />
          )}
        </div>
      </div>
    </div>
  );
};
export default React.memo(ModalWindow);
